<template>
  <div class="waterfall-item" ref="waterItem" @click="navTo">
    <img :src="item.url" @load="loaded" />
    <p style="font-size: 16px">{{ item.title }}</p>
    <p style="font-size: 12px; color: #bbbbbb;">{{ item.sub }}</p>
    <p style="font-size: 18px; color: brown; font-weight: bold;">{{ item.price }}</p>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { useRouter } from 'vue-router';
defineProps({
  item: Object
})
const emit = defineEmits(['onLoad']);
const waterItem = ref(null);
const loaded = () => {
  emit("onLoad", waterItem.value.offsetHeight)
}
const router = useRouter()
const navTo = () => {
  router.push('/detail')
}
</script>
<style scoped>
.waterfall-item {
  break-inside: avoid;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  width: 100%;
  text-align: left;
  border-radius: 4px;
}

.waterfall-item img {
  display: black;
  width: 100%;
  border-radius: 5px;
}
</style>